import { FC, Suspense, useState } from 'react'
import { BrowserRouter, HashRouter, Navigate,Route ,Routes } from 'react-router-dom';

type ModeType = "history"|"hash";

type Props={
  routes:Router1,
  mode?:ModeType,
}

const Loading = ()=>{
  return <div>...路由加载中</div>
}

const Routerview:FC<Props>=({routes})=>{
    const render = (arr:Router1)=>
      arr&&arr.map((item,index)=>
        <Route key={index} path={item.path}
         element={item.to?<Navigate to={item.to}/>:<item.element/>}
        >
          {
            item.children&&render(item.children)
          }  
        </Route>
      )
      return (
         <Suspense fallback={<div><Loading></Loading></div>}>

            <Routes>
                {
                  render(routes)
                }
            </Routes>
         </Suspense>
      )
}

const App:FC<Props> = ({routes,mode})=> 
   mode ==='history'?
   <BrowserRouter>
       <Routerview routes={routes} />
   </BrowserRouter>:
   <HashRouter>
        <Routerview routes={routes} />
   </HashRouter>

export default App
